<style rel="stylesheet/scss" lang="scss" scoped>
	.bute-box {
		width: 99%;
		display: flex;
		margin-top: 10px;
		position: relative;
		flex: 1;
		padding-right: 10px;
		box-sizing: border-box;
		.bute-box_left,
		.bute-box_right {
			overflow: auto;
			padding: 10px;
			flex: 1;
			box-sizing: border-box;
			flex-direction: column;
			border: 1px solid #E5E5E5;
		}
		.bute-box_left{
			margin-right: 10px;
		}
		.box-flex {
			display: flex;
			height: auto;
			flex-direction: column;
		}
		.box-flex_info {
			display: flex;
			height: auto;
			align-items: center;
			margin-bottom: 20px;
			>.w-input{
				flex: 1;
			}
		}
		.w-span {
			line-height: 40px;
			height: 40px;
			font-size: 14px;
			padding-right: 10px;
			display: inline-block;
		}
		.img-box {
			width: 60px;
			height: 60px;
			position: relative;
			border: 1px solid #e5e5e5;
			>i {
				position: absolute;
				right: -8px;
				top: -7px;
				font-size: 24px;
				color: #FF0000;
			}
		}
		.box-flex-center {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10px;
		}
		.div-flex {
			display: flex;
			align-items: center;
			flex-direction: column;
		}
		.box-flex_log {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.sp-w-50 {
			width: 100px;
			display: block;
		}
		.erl-input{
			flex: 1;
		}
		.w-span_re{
			width: 110px;
			line-height: 40px;
		}
	}
</style>
<template>
	<div class="bute-box">
		<div class="bute-box_left">
			<template v-if="infoList && infoList.length>0">
				<template v-for="(item,index) in infoList">
					<el-col class="box-flex_info" v-if="item.propertyType == 1">
						<span class="w-span">{{item.propertyName}}</span>
						<el-input placeholder="请输入" v-model="item.content" size="mini" class="w-input"></el-input>
					</el-col>
					<el-col class="box-flex_info" v-if="item.propertyType == 2">
						<span class="w-span">{{item.propertyName}}</span>
						<el-input placeholder="请输入" v-model="item.content" size="mini" class="w-input"></el-input>
						<el-input placeholder="跳转链接" v-model="item.contentUrl" class="m-l-10 w-input" size="mini" ></el-input>
					</el-col>
					<el-col class="box-flex" v-if="item.propertyType == 3">
						<div class="box-flex_info">
							<span class="w-span">{{item.propertyName}}</span>
							<el-input placeholder="请输入" v-model="item.content" size="mini" class="m-r-10 w-input"></el-input>
							<div class="img-box m-r-10" v-if="item.content">
								<i class="iconfont icon-guanbi" @click="deleteImg(item.id)"></i>
								<img :src="item.content" style="width:60px;display: inline-block;height:60px; border-radius: 5px;z-index:999;border: 1px solid #E5E5E5;"
								    alt="" />
							</div>
							<el-button type="primary" size="mini" @click="clickPicture(item.id)">浏览</el-button>
						</div>
					</el-col>
					<el-col class="box-flex" v-if="item.propertyType == 4">
						<div class="box-flex_info">
							<span class="w-span">{{item.propertyName}}</span>
							<el-input placeholder="跳转链接" v-model="item.contentUrl" size="mini" class="m-r-10 w-input"></el-input>
							<div class="img-box m-r-10" v-if="item.content">
								<i class="iconfont icon-guanbi" @click="deleteImg(item.id)"></i>
								<img :src="item.content" style="width:60px;display: inline-block;height:60px; border-radius: 5px;z-index:999;border: 1px solid #E5E5E5;"
								    alt="" />
							</div>
							<el-button type="primary" size="mini" @click="clickPicture(item.id)">浏览</el-button>
						</div>
					</el-col>
				</template>
			</template>
			<!-- <el-col class="box-flex-center">
				<el-button type="primary" size="mini" class="m-l-10" @click="centerDialogVisible = true">新增属性</el-button>
			</el-col> -->
		</div>
		<div class="bute-box_right" v-if="queryInfo">
			<el-row v-if="getSeniorMall">
				<el-col class="box-flex_info">
					<span class="w-span_re">一星销售价</span>
					<el-input placeholder="请输入一星销售价" size="mini" v-model="queryInfo.star1Discount" class="w-input" type="number"></el-input>
				</el-col>
			</el-row>
			<el-row v-if="getSeniorMall">
				<el-col class="box-flex_info">
					<span class="w-span_re">二星销售价</span>
					<el-input placeholder="请输入二星销售价" size="mini" v-model="queryInfo.star2Discount" class="w-input" type="number"></el-input>
				</el-col>
			</el-row>
			<el-row v-if="getSeniorMall">
				<el-col class="box-flex_info">
					<span class="w-span_re">三星销售价</span>
					<el-input placeholder="请输入三星销售价" size="mini" v-model="queryInfo.star3Discount" class="w-input" type="number"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col class="box-flex_info">
					<span class="w-span_re">商品编码<i class="text-red">*</i></span>
					<el-input placeholder="请输入商品编码" size="mini" v-model="queryInfo.goodsModelNumber" class="w-input"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col class="box-flex_info">
					<span class="w-span_re">商品名称<i class="text-red">*</i></span>
					<el-input placeholder="请输入" size="mini" v-model="queryInfo.goodsName" class="w-input"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col class="box-flex_info">
					<span class="w-span_re">商品图标<i class="text-red">*</i></span>
					<div class="img-box m-r-10" v-if="queryInfo.logoUrl">
						<i class="iconfont icon-guanbi" @click="deleteImg('logoUrl')"></i>
						<img :src="queryInfo.logoUrl" style="width:60px;display: inline-block;height:60px; border-radius: 5px;z-index:999;border: 1px solid #E5E5E5;"
							alt="" />
					</div>
					<el-button type="primary" size="mini" @click="clickPicture('logoUrl')">上传</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col class="box-flex_info">
					<span class="w-span_re">商品价格<i class="text-red">*</i></span>
					<el-input placeholder="请输入商品价格" size="mini" v-model="queryInfo.marketPrice" class="w-input" type="number"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col class="box-flex_info">
					<span class="w-span_re">品牌名称</span>
					<el-input placeholder="请输入品牌名称" size="mini" v-model="queryInfo.goodsBrand" class="w-input"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col class="box-flex_info">
					<span class="w-span_re">OEM码</span>
					<el-input placeholder="请输入OEM码" size="mini" v-model="queryInfo.oemCode" class="w-input"></el-input>
				</el-col>
			</el-row>
			<el-row>
				<el-col class="box-flex_info">
					<span class="w-span_re">横向件专属码</span>
					<el-input placeholder="请输入横向件专属码" size="mini" v-model="queryInfo.exclusiveCode" class="w-input"></el-input>
				</el-col>
			</el-row>
			<template v-if="queryInfo.extend">
				<el-row v-for="(item, index) in queryInfo.extend" :key="index">
					<el-col class="box-flex_info">
						<span class="w-span_re">{{item.key}}</span>
						<el-input placeholder="请输入横向件专属码" size="mini" v-model="item.value" class="w-input"></el-input>
					</el-col>
				</el-row>
			</template>
		</div>
		<input type="file" ref="logo"  @change="isSizeClear();" style="display: none;"/>
		<el-dialog title="新增属性" :visible.sync="centerDialogVisible" width="45%" center>
			<el-row class="p-all-20 ">
				<el-col :span="20" class="box-flex_log m-b-10">
					<span class="sp-w-50 m-r-10">属性名称:</span>
					<el-input placeholder="属性名称" v-model="propertyName" maxLength="20"/>
				</el-col>
				<el-col :span="20" class="box-flex_log m-b-10">
					<span class="sp-w-50 m-r-10">属性类型:</span>
					<el-radio label="TEXT" v-model="type">纯文本</el-radio>
					<el-radio label="URL" v-model="type">文本链接</el-radio>
					<el-radio label="IMAGE" v-model="type">纯图片</el-radio>
					<el-radio label="IMAGE_URL" v-model="type">图片链接</el-radio>
				</el-col>
				<el-col :span="20" class="box-flex_log m-b-10">
					<span class="sp-w-50 m-r-10">所属组名:</span>
					<el-input placeholder="所属组名" v-model="groupName" maxLength="20"/>
				</el-col>
				<el-col :span="20" class="box-flex_log m-b-10">
					<span class="sp-w-50 m-r-10">顺序号:</span>
					<el-input v-model="num" type="number" placeholder="顺序号" maxLength="5" oninput="if(value.length>5)value=value.slice(0,5)"/>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveAdmin">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		props: {
			// 商品id
			goodsId: {
				type: [String,Number],
				default: '',
			},
			// 二级分类id
			secCatId: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				num: 0,
				type: '',
				imgId: '',
				groupName: '',
				uploadType: '',
				merchantIcon: '',
				propertyName: '',
				infoList: [],
				queryInfo: {
					star1Discount: '',
					star2Discount: '',
					star3Discount: '',
					goodsModelNumber: '',
					goodsName: '',
					logoUrl: '',
					marketPrice: '',
					goodsBrand: '',
					oemCode:'',
					exclusiveCode:''
				},
				uploadTypeChange: '',
				centerDialogVisible: false,
			}
		},
		created() {
			// 初始化数据
			console.log(this.getStepCache)
			
			if(this.getStepCache.goodId) {
				this._getQueryAttr()
				this._querySpec()
				return 
			}
			this.infoList = this.getStepCache.queryAttrList ? this.getStepCache.queryAttrList : []
			
		},
		methods: {
			/**
			 * 初始化数据
			 */
			_querySpec() {
				this.$ajax({
					api: 'merchant/goods/querySpec',
					params: {
						token: getToken(),
						goodsId: this.getStepCache.goodId ? this.getStepCache.goodId :'',
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					console.log(res)
					console.log('获取属性数据')
					this.queryInfo = res.data
					this.queryInfo.extend = res.data.extend ? JSON.parse(res.data.extend)  : ''
					console.log(this.queryInfo)
					//this.queryInfo = Object.assign(res.data,res)
				})
			},
			
			saveAdmin() {
				if(!this.type){
					this.$message({
						type: 'error',
						message: '请选择属性类型'
					})
					return
				}
				this.$ajax({
					api: 'merchant/goods/addAttr',
					params: {
						token: getToken(),
						goodsId: this.getStepCache.goodId ? this.getStepCache.goodId :'',
						name: this.propertyName,
						type: this.type,
						sort: this.num,
						groupName: this.groupName,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.centerDialogVisible = false
						this.$message({
							type: 'success',
							message: '新增成功'
						})
						this.num = 0
						this.propertyName = this.type = this.groupName = ''
						this.infoList.push(res.data)
					}else{
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			deleteImg(id) {
				if(id == 'logoUrl'){
					this.queryInfo.logoUrl = ''
					return
				}
				this.infoList.forEach((item) => {
					if (item.id == id) {
						item.content = ''
					}
				})
			},
			_getQueryAttr() {
				this.$ajax({
					api: 'merchant/goods/queryAttr',
					params: {
						token: getToken(),
						goodsId: this.getStepCache.goodId ? this.getStepCache.goodId :'',
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							'',
					}
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						
						console.log(this.infoList)
						if(!this.getStepCache.goBackFlag){
							this.infoList = res.data
							let attrObj = Object.assign({},this.getStepCache,{queryAttrList: res.data})
							this.setStepCache(attrObj)
							console.log(this.getStepCache)
							console.log('存缓存')
						}else{
							console.log('拿缓存')
							console.log(this.getStepCache)
							this.infoList = this.getStepCache.queryAttrList
							
							
						}
						
						
					}else{
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			},
			updateAttrFn() {
				let attr = !this.queryInfo.goodsModelNumber ? '请填写商品编码' :  !this.queryInfo.goodsName ? '请填写商品名称': !this.queryInfo.logoUrl ? '请上传商品图标':  !this.queryInfo.marketPrice ? '请填写商品价格' : ''
				if(attr) {
					this.$message({
						type:'error',
						message:attr
					})
					return
				}
				// v3 版本
				// 保存商品 TODO 1 编辑的时候 另做方法  2 merchantId 之后做成状态管理存 比较好  
				this.$post({
					url: 'goods/',
					data: {
						merchantId: window.sessionStorage.getItem('merchantId'),
						categoryParentId: this.getStepCache.firstCartId,
						categoryId: this.getStepCache.secondCartId,
						goodsName: this.queryInfo.goodsName,
						goodsIcon: this.queryInfo.logoUrl,
						code: this.queryInfo.oemCode,
						salePrice: this.queryInfo.marketPrice,
						brandName: this.queryInfo.goodsBrand,
						oem: this.queryInfo.oemCode,
						transversePieceCode: this.queryInfo.exclusiveCode,
						starPrice: this.handlestarPriceFn(this.queryInfo),
						status: 1,
						properties: this.handlePropertiesFn(),
						models: this.handleModels()
					},
					callback: res => {
						console.log(res)
						if(res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								type: 'success',
								message: '保存成功'
							})
							this.$emit('updateAttrStep')
						}else {
							this.$message({
								message: resmsg,
								type: 'warning'
							})
						}
					}
				})
			},
			// 出来已经选中的车型ids 
			handleModels() {
				let idsList = []
				if(this.getModelIdAttr && this.getModelIdAttr.length) {
					this.getModelIdAttr.forEach((item) => {
						idsList.push({modelId: item})
					})
				}
				return idsList
			},
			// 处理传递的分类属性
			handlePropertiesFn() {
				let list = []
				if(this.infoList && this.infoList.length) {
					this.getStepCache.queryAttrList.forEach((item) => {
						let properObj = {}
						properObj.categoryPropertyId = item.id
						properObj.propertyKey = item.propertyName
						
						switch(item.propertyType) {
							case 1:
								properObj.propertyValue = JSON.stringify({'type': 1, 'content': item.content })
								break;
							case 2:
								properObj.propertyValue = JSON.stringify({'type': 2, 'title': item.content, 'link': item.contentUrl })
								break;
							case 3:
								properObj.propertyValue = JSON.stringify({'type': 3, 'url': item.contentUrl })
								break;
							case 4:
								properObj.propertyValue = JSON.stringify({'type': 4, 'title': item.content,'link': item.contentUrl })
								break;
							
						}
						list.push(properObj)
					})
				}
				return list
			},
			/**
			 * @param info 所有填写的数据
			 * @return 返回价格字符串json
			 */
			handlestarPriceFn(info) {
				let priceObj = {
					price1: info.star1Discount,
					price3: info.star2Discount,
					price4: info.star3Discount,
				}
				return JSON.stringify(priceObj)
			},
			clickPicture(id) {
				if(this.uploadTypeChange !== "") {
					return;
				}
				this.imgId = id
				this.$refs.logo.click();
			},
			isSizeClear() {
				if (!this.$refs.logo.files[0]) {
					return;
				}
				this.uploadTypeChange = this.uploadType;
				let maxSize = 1024*1024*5
				if(this.$refs.logo.files[0].size > maxSize) {
					this.$message({
						type: 'error',
						message: '请上传小于5M图片'
					})
					this.uploadTypeChange = "";
					this.$refs.logo.value = ''
					return false
					
				}
				let form = new FormData();
				let logo = this.$refs.logo.files[0];
				console.log(logo)
				form.append("files", logo);
				form.append('merchantId', window.sessionStorage.getItem('merchantId'))
				this.$post({
					excel: true,
					url: `goods/picture/${window.sessionStorage.getItem('merchantId')}`,
					data: {
						file: form  
					},
					callback: res => {
						console.log(res)
						console.log(res.data[logo.name])
						if(res.status === 200) {
							if(this.imgId == 'logoUrl' ) {
								this.queryInfo.logoUrl = res.data[logo.name]
								return
							}
							this.infoList.forEach((item) => {
								if (item.id == this.imgId) {
									item.content = res.data[logo.name]
								}
							})
						}
						this.$refs.logo.value = ''
						this.uploadTypeChange = "";
					}
				})
			},
			...mapMutations({
				setStepCache: 'SET_STEP_CACHE',
			})
		},
		computed: {
			...mapGetters([
				'getSeniorMall',
				'getStepCache',
				'getModelIdAttr'
			])
		}
	}
</script>
